<!--个体疫病管理-->
<template>
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <ActionBar
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        :cancel-active="cancelActive"
        :save-active="saveActive"
        :has-save="false"
        @add="add"
        @cancel="cancel"
        @edit="edit"
        @del="del"
        @save="save"
      />
    </template>
    <template v-slot:searchbox>
      <div class="label-input mr-20">
        <div class="label">个体名称:</div>
        <div class="input">
          <el-select
            v-model="bionIdName"
            clearable
            filterable
            placeholder="请选择"
            @focus="querybionId"
          >
            <el-option
              v-for="(item, index) in bionIdList"
              :key="index + 'bionId'"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">耳标:</div>
        <div class="input">
          <el-input v-model="eagTag" placeholder="请输入耳标" clearable />
        </div>
      </div>
      <div class="label-input mr-20">
        <div class="label">执行时间段:</div>
        <div class="input">
          <el-date-picker
            v-model="executionStartTime"
            align="right"
            clearable
            placeholder="请选择执行开始时间"
          />
          <el-date-picker
            v-model="executionEndTime"
            align="right"
            clearable
            placeholder="请选择执行结束时间"
          />
        </div>
      </div>
      <div class="search ml-20">
        <img src="~@/assets/action-bar-icon/search.png" @click="queryPageList" />
      </div>
    </template>
    <template v-slot:content>
      <el-table
        ref="IndividualDiseaseManagementData"
        :data="tableData"
        border
        stripe
        max-height="88%"
        highlight-current-row
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" width="55" />
        <el-table-column label="耳标" prop="eagTag" />
        <el-table-column label="个体名称" prop="name" width="100" />
        <el-table-column label="个体所在羊舍" prop="facilityName" width="150" />
        <el-table-column label="疫病名称" prop="blightName" width="150" />
        <el-table-column label="疫病描述" prop="descrption" />
        <el-table-column label="建议" prop="suggest" />
        <el-table-column label="处理时间">
          <template slot-scope="scope">{{ format(scope.row) }}</template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" width="100">
          <template slot-scope="scope">
            <span>{{ formatSex(scope.row.gender) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" prop="birthday" width="100" />
      </el-table>
      <el-dialog title="个体疫病信息" :visible.sync="addformDataDialog">
        <el-form ref="formDataRef" :model="formDataF" label-position="left" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="个体名称:"
                prop="bionId"
                :rules="[{
                  required: true, message: '请选择个体', trigger: ['blur','change']
                }]"
              >
                <el-select v-model="formDataF.bionId" placeholder="请选择" clearable filterable>
                  <el-option
                    v-for="(item, index) in bionIdList"
                    :key="index + 'bionId'"
                    :label="item.name"
                    :value="item.bionId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="疫病名称:"
                prop="blightId"
                :rules="[{
                  required: true, message: '请选择疫病', trigger: ['blur','change']
                }]"
              >
                <el-select
                  v-model="formDataF.blightId"
                  placeholder="请选择"
                  clearable
                  filterable
                  @change="changeBLightId($event)"
                >
                  <el-option
                    v-for="(item, index) in blightList"
                    :key="index + 'blightId'"
                    :label="item.blightName"
                    :value="item.blightId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="疫病描述:"
                prop="descrption"
                :rules="[{
                  required: true, message: '请填写疫病描述', trigger: ['blur','change']
                }]"
              >
                <el-input v-model="formDataF.descrption" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="执行人:"
                prop="employeeId"
                :rules="[{
                  required: true, message: '请选择执行人', trigger: ['blur','change']
                }]"
              >
                <el-select v-model="formDataF.employeeId" placeholder="请选择" clearable filterable>
                  <el-option
                    v-for="(item, index) in employeeIdList"
                    :key="index + 'employeeId'"
                    :label="item.employeeName"
                    :value="item.employeeId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="执行开始日期:"
                prop="executionStartTime"
                :rules="[{
                  required: true, message: '请选择执行开始日期', trigger: ['blur','change']
                }]"
              >
                <el-date-picker
                  v-model="formDataF.executionStartTime"
                  value-format="timestamp"
                  :picker-options="pickerOptionscreate"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="执行结束日期:"
                prop="executionEndTime"
                :rules="[{
                  required: true, message: '请选择执行结束日期', trigger: ['blur','change']
                }]"
              >
                <el-date-picker
                  v-model="formDataF.executionEndTime"
                  value-format="timestamp"
                  :picker-options="pickerOptionsend"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="model-cancel-btn" @click="addformDataDialog = false">取 消</el-button>
          <el-button type="primary" class="model-submit-btn" @click="confirm()">确 定</el-button>
        </div>
      </el-dialog>
      <Pagination
        :page-size="pageSize"
        :total-size="length"
        :current-page="currentPage"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </template>
  </BaseMainSlot>
</template>

<script>
import Pagination from "@/components/Pagination";
import ActionBar from "@/components/ActionBar/index";
import BaseMainSlot from "@/components/BaseMainSlot/baseone.vue";
import { mymixin } from "@/utils/mixin";
import req from "@/api/digital-production/health-management/individual-blight-record/index";
import { getToken } from "@/utils/auth";

export default {
  name: "IndividualDiseaseManagement",
  components: {
    Pagination,
    ActionBar,
    BaseMainSlot
  },
  mixins: [mymixin],
  data() {
    var that = this;
    return {
      eagTag: "",
      formDataF: {},
      addformDataDialog: false,
      tableData: [],
      // 搜索条件
      bionIdName: "",
      bionIdNumber: "",
      executionStartTime: "",
      executionEndTime: "",
      bionIdList: [], // 个体信息数组
      blightRecordIdList: [],
      employeeIdList: [],
      blightList: [], // 病疫信息数组
      length: 0,
      pickerOptionscreate: {
        disabledDate(time) {
          // 开始时间的禁用
          return (
            time.getTime() > new Date(that.formDataF.executionEndTime).getTime()
          );
        }
      },
      // 结束时间
      pickerOptionsend: {
        disabledDate(time) {
          // 结束时间的禁用
          return (
            time.getTime() <
            new Date(that.formDataF.executionStartTime).getTime()
          );
        }
      }
    };
  },
  watch: {
    nowChanceStau(newval) {
      if (newval === "add") {
        this.adduser();
      } else if (newval === "edit") {
        this.adduser();
      } else if (newval === "del") {
        // this.deleteRow();
      } else if (newval === "cancel") {
        // this.deleteRow();
        this.$refs.tableRef.setCurrentRow();
        this.nowChanceStau = "";
      }
    },
    addformDataDialog(v) {
      if (this.nowChanceStau === "add") {
        /* this.$nextTick(() => {
          this.$refs["formDataRef"].resetFields();
        }); */
      }
    }
  },
  created() {
    this.queryPageList();
    this.querybionId();
    this.queryBlight();
    this.queryEmployeeId();
  },
  methods: {
    formatSex(val) {
      if (val === "MALE") {
        return "公";
      } else if (val === "FEMALE") {
        return "母";
      }
    },
    format(val) {
      let result = "";
      if (
        val.taskProgress === "待处理" ||
        val.taskProgress === "已逾期" ||
        val.taskProgress === "已作废"
      ) {
        result = val
          ? this.$moment(val.executionStartTime).format("YYYY-MM-DD") +
            "~" +
            this.$moment(val.executionEndTime).format("YYYY-MM-DD")
          : "";
      } else {
        result = val.processTime
          ? this.$moment(val.processTime).format("YYYY-MM-DD")
          : "";
      }
      return result;
    },
    // 查询表格
    queryPageList() {
      req
        .queryPageList({
          page: this.currentPage,
          size: this.pageSize,
          entity: {
            executionEndTime: this.executionEndTime,
            executionStartTime: this.executionStartTime,
            name: this.bionIdName || this.bionIdNumber,
            eagTag: this.eagTag,
            taskProgress: "待处理"
          }
        })
        .then(res => {
          if (res.code === 1) {
            let data = res.data || {};
            this.length = data.totalElements;
            let result = data.content || [];
            this.tableData = result;
            /* if (this.tableData.length === 0) {
              this.addblankmet();
            } */
          }
        });
    },
    // 查询个体的信息
    querybionId() {
      req
        .queryBionAll({
          breed: "HuSheep"
        })
        .then(res => {
          if (res.code === 1) {
            let data = res.data || [];
            this.bionIdList = data;
          }
        });
    },
    // 查询人员的信息
    queryEmployeeId() {
      req.queryByConditionEmployee({}).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.employeeIdList = data;
        }
      });
    },
    // 查询病疫的信息
    queryBlight() {
      req.queryAllBlight({}).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          this.blightList = data;
        }
      });
    },
    // 改变病疫名称自动填充病疫描述
    changeBLightId(blightId) {
      let index = this.blightList.findIndex(item => item.blightId === blightId);
      if (index !== -1) {
        this.formDataF.descrption = this.blightList[index]["descrption"];
      } else {
        this.formDataF.descrption = "";
      }
    },
    // 添加或者修改提交
    confirm() {
      if (this.nowChanceStau === "add") {
        this.$refs["formDataRef"].validate(valid => {
          if (valid) {
            this.formDataF.organizationNo = parseInt(
              getToken("organizationNo")
            );
            this.formDataF.taskProgress = "待处理";
            req.add(this.formDataF).then(res => {
              if (res.code === 1) {
                this.$message.success("添加成功！");
                this.addformDataDialog = false;
                this.addActive = true;
                this.nowChanceStau = "";
                this.formDataF = {};
                this.queryPageList();
              } else {
                this.$message.error("添加失败！");
              }
            });
          } else {
            this.$message.error("请将信息填写完整！！！");
            return false;
          }
        });
      } else if (this.nowChanceStau === "edit") {
        //
        this.$refs["formDataRef"].validate(valid => {
          if (valid) {
            this.formDataF.organizationNo = parseInt(
              getToken("organizationNo")
            );
            this.formDataF.taskProgress = "待处理";
            req.edit(this.formDataF).then(res => {
              if (res.code === 1) {
                this.$message.success("修改成功！");
                this.addformDataDialog = false;
                this.addActive = true;
                this.nowChanceStau = "";
                this.formDataF = {};
                this.queryPageList();
              } else {
                this.$message.error("修改失败！");
              }
            });
          } else {
            this.$message.error("请将信息填写完整！！！");
            return false;
          }
        });
      }
    },
    adduser() {
      // alert(this.nowChanceStau)
      if (this.nowChanceStau === "add") {
        this.formDataF = {};
      }
      this.addformDataDialog = true;
      this.$nextTick(() => {
        // alert(1);
        this.$refs["formDataRef"].clearValidate();
      });
    },
    handleSelectionChange(list) {
      this.blightRecordIdList = [];
      let notvalue = true;
      this.blightRecordIdList = list.map(item => {
        if (item.blightRecordId) {
          return item.blightRecordId;
        } else {
          notvalue = false;
          return "";
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
        return;
      }
      if (this.blightRecordIdList.length > 0) {
        this.delActive = true;
        this.cancelActive = true;
      } else {
        this.delActive = false;
      }
    },
    delmessage() {
      req
        .del({
          blightRecordIdList: this.blightRecordIdList
        })
        .then(res => {
          if (res.code === 1) {
            this.$message.success("删除成功!");
            this.queryPageList();
          } else {
            this.$message.error("删除失败!");
          }
        });
    },

    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.queryPageList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    handleEdit(row) {
      if (row.blightRecordId) {
        this.formDataF = JSON.parse(JSON.stringify(row));
        this.editActive = true;
        this.saveActive = false;
        this.cancelActive = true;
      }
    },
    cancel() {
      this.$refs.IndividualDiseaseManagementData.setCurrentRow();
      this.$refs.IndividualDiseaseManagementData.clearSelection();
      this.nowChanceStau = "";
      this.addActive = true;
      this.cancelActive = false;
      this.editActive = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .el-table {
  overflow: auto;
}
::v-deep .el-dialog__body {
  background: #f0f3f7;
  color: #fff;
  .el-input {
    width: 100%;
  }
  .el-select {
    //充满父元素（el-col）
    width: 100%;
  }
}
.el-input {
  width: 200px;
}
::v-deep .el-table__body tr {
  // color: blue;
  height: 52px;
}
// 弹框底下按钮样式
.model-submit-btn{
background-color: #006e91;
    border-color: #006e91;
    &:hover{
      background-color: #006f91b9;
    border-color: #006f91b9;
    }
}
.model-cancel-btn{
  &:hover{
      background-color: #006f9128;
    border-color: #006e91;
    color:#006e91
    }
}
</style>
